<template>
  <div
    :id="'svgA' + randomStr()"
    :style="'width:' + p.width + 'px;' + 'height:' + p.height + 'px;'"
    ref="svgA"
  ></div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  watch,
  shallowRef,
  defineExpose,
  onMounted,
  onUpdated,
  getCurrentInstance,
} from "vue";
import SVGA from "svgaplayerweb";

const p = defineProps({
  url: {
    type: String,
    default: "/static/svga",
  },
  width: {
    type: Number,
    default: 400,
  },
  height: {
    type: Number,
    default: 400,
  },
});

onMounted(() => {
  const that = getCurrentInstance();

  const obj = that.refs["svgA"];
  console.dir(obj);
  let player = new SVGA.Player("#" + obj.id);
  let parser = new SVGA.Parser("#" + obj.id);

  parser.load(p.url, (videoItem) => {
    console.log("videoItem", videoItem);
    player.setVideoItem(videoItem);
    player.startAnimation();
  });
});
onUpdated(() => {
  const that = getCurrentInstance();
  const obj = that.refs["svgA"];
  let player = new SVGA.Player("#svgA");
  let parser = new SVGA.Parser("#svgA");

  parser.load(p.url, (videoItem) => {
    console.log("videoItem", videoItem);
    player.setVideoItem(videoItem);
    player.startAnimation();
  });
});
function randomStr(len = 32) {
  let t = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
  let val = "";
  for (let i = 0; i < len; i++) {
    val += t.charAt(Math.floor(Math.random() * t.length));
  }
  return val;
}
</script>
<style lang="scss" scoped>
#svgA {
  width: 400px;
  height: 400px;
}
</style>
